<script lang="ts" setup>
import useThemeStore from '@/store/theme.ts'
import {computed, watch} from 'vue'

const themeStore = useThemeStore()
const fullScreen = computed(() => themeStore.fullScreen)
const app: any = document.getElementById('app')
const exitMaximize = () => {
	themeStore.setFullScreen(false)
	app.classList.remove('main-maximize')
}

// 监听当前页是否全屏，动态添加 class
watch(
	() => fullScreen,
	() => {
		if (fullScreen.value) {
			app.classList.add('main-maximize')
		}
	},
	{immediate: true}
)
</script>

<template>
	<div class="maximize" @click="exitMaximize">
		<el-icon>
			<Close/>
		</el-icon>
	</div>
</template>

<style lang="scss" scoped>
.maximize {
	position: fixed;
	top: -25px;
	right: -25px;
	z-index: 999;
	width: 52px;
	height: 52px;
	cursor: pointer;
	background-color: var(--el-color-info);
	border-radius: 50%;
	opacity: 0.7;

	&:hover {
		background-color: var(--el-color-info-dark-2);
	}

	.el-icon {
		position: relative;
		top: 68%;
		left: 32%;
		font-size: 16px;
		color: #ffffff;
		transform: translate(-50%, -50%);
	}
}
</style>
